.header {
    height: 6.5rem;
    overflow: hidden;
    background: url(../images/header-bg.jpg) no-repeat;
    background-size: cover;
    position: relative;
}

.header-userpic {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 0.05rem solid #415e24;
    overflow: hidden;
    position: absolute;
    top: 1.2rem;
    left: 0.3rem;
}

.header-userpic img {
    width: 1.5rem;
    height: 1.5rem;
}

.header-username {
    position: absolute;
    top: 1.8rem;
    left: 2.5rem;
}

.header-userinf {
    font-size: 3.2vw;
    color: #86ae58;
}

.header-userinf .userinf-score {
    height: 1rem;
    width: 1.5rem;
    border: 1px solid #799a55;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 2.5rem;
    left: 2.4rem;
    background-color: #d6e6a8;
    opacity: 0.8;
}

.header-userinf .userinf-ranking {
    height: 1rem;
    width: 1.5rem;
    border: 1px solid #799a55;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 3.4rem;
    left: 3.8rem;
    background-color: #d6e6a8;
    opacity: 0.8;
}

.menu {
    height: 5rem;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    background-color: #f6fec3;
    position: relative;
}

.menu-block {
    height: 3rem;
    width: 2rem;
    font-size: 3.6vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-top: -0.5rem;
    margin-bottom: 0.1rem;
}



.menu-block img {
    height: 2rem;
    margin-bottom: 0.1rem;
}

.introduce {
    padding: 0 0.3rem 0.2rem;
    background-color: #f6fec3;
}

.introduce h3 {
    font-size: 3.6vw;
}

.introduce ul {
    font-size: 3.2vw;
    color: #4f5330;
    line-height: 2;
}

.scoreexplain {
    padding: 0 0.3rem 0.2rem;
    background-color: #f6fec3;
}

.scoreexplain h3 {
    font-size: 3.6vw;
}

.scoreexplain ul {
    font-size: 3.2vw;
    color: #4f5330;
    line-height: 2;
}

.scoreboard-header {
    font-size: 3.6vw;
    line-height: 2;
    padding-left: 0.4rem;
    background-color: #fff;
}

.scoreboard-main {
    padding: 0.2rem 0.2rem 0.01rem;
    background-color: #f6fec3;
}

.scoreboard-mian-block {
    height: 1.5rem;
    padding: 0 0.2rem;
    margin-bottom: 0.2rem;
    border-radius: 0.1rem;
    border: 1px solid #b0c79b;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}

.scoreboard-mian-block .block-userpic {
    height: 1.3rem;
    width: 1.3rem;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 0.2rem;
}
.userpic-rankicon {
    height: 0.45rem;
    width: 0.45rem;
    text-align: center;
    line-height: 0.45rem;
    font-size: 3.6vw;
    font-weight: bold;
    background: url(../images/rank_icon.png);
    background-size: cover;
    position: absolute;
    left: 1.15rem;
    top: 0.05rem;

}

.scoreboard-mian-block .block-userpic img {
    height: 1.3rem;
    width: 1.3rem;
}

.scoreboard-mian-block .block-username {
    flex-grow: 1;
}

.scoreboard-mian-block .block-userscore {
    color: #ee842e;
}

.cover {
    background: #000;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: 0.6;
    display: none;
    z-index: 2;
}

.sign-pop {
    height: 6.2rem;
    width: 7.1rem;
    border-radius: 0.1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #5b8464;
    position: fixed;
    top: 3.5rem;
    left: 0.2rem;
    z-index: 3;
}

.pop-header {
    position: absolute;
    top: -0.5rem;
}

.pop-header img {
    width: 4rem;
}

.pop-header span {
    font-size: 5vw;
    font-weight: bold;
    color: #fff;
    position: absolute;
    top: 0.2rem;
    left: 1.2rem;
}

.pop-main {
    height: 5.8rem;
    width: 6.7rem;
    border-radius: 0.1rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;

}

.pop-main-box {
    height: 0.4rem;
    background-color: #84cf7a;
}

.pop-main-subhead {
    font-size: 3.6vw;
    line-height: 2;
    text-align: center;
    color: #fff;
    background-color: #79c472;
}

.pop-main-checks {
    height: 4.9rem;
    display: flex;
    justify-content: space-around;
    align-items: space-around;
    flex-wrap: wrap;
    background-color: #5fa75d;
}

.pop-main-check {
    width: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.pop-main-check span {
    margin-top: 0.1rem;
    font-size: 3vw;
    color: #9be08f;
}

.pop-main-check .check-box {
    width: 1rem;
    height: 1rem;
    border-radius: 0.1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #4f8f52;
}

.pop-main-check .check-box-active {
    border: 0.05rem solid #f8f58c;
    box-sizing: border-box;
    background-color: #3b793a;
}

.pop-main-check .check-box-active::after{
    content: '';
    height: 0.35rem;
    width: 0.35rem;
    background: url(../images/check-box-active.png);
    background-size: cover;
    position: absolute;
    right: 0.15rem;
    bottom: 1.25rem;
}

.check-box img {
    height: 0.4rem;
}

.check-box span {
    font-size: 2.8vw;
    color: #fff;
}